<template>
    <div class="tableDeep">
        <a-table :dataSource="salesMansList" :columns="columns" rowKey="id" :pagination="false" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
            <template #headerCell="{ column }">
                <template v-if="column.key === 'name'">
                    <span>
                        <smile-outlined />
                        Name
                    </span>
                </template>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                    <a>{{ record.name }}</a>
                </template>
                <template v-else-if="column.key === 'dept'">
                    <span>
                        <a-tag 
                            v-for="item in record.dept"
                            :key="item"
                            :color="item === '缝纫机销售' ? 'volcano' : item.length > 5 ? 'geekblue' : 'green'"
                        >
                            {{ item }}
                        </a-tag>
                    </span>
                </template>
                <template v-else-if="column.key === 'num'">
                    <span :class="{'wageUp': record.num > 500, 'wageDown': record.num <= 50 }">{{ record.num }}</span>
                    <rise-outlined class="wageUp ml-5" v-if="record.num > 500" />
                    <fall-outlined class="wageDown ml-5" v-if="record.num <= 50" />
                </template>
            </template>
        </a-table>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { reactive } from '@vue/reactivity'
import { salesWage } from '@/api/home/index.js'
import { onMounted } from '@vue/runtime-core'
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    components: {
        ArrowUpOutlined,
        ArrowDownOutlined
    },
    setup() {
        const columns = [{
            title: '销售部门月度总览',
            width: 150
        }, {
            title: '编号',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age'
        }, {
            title: '部门',
            dataIndex: 'dept',
            key: 'dept'
        }, {
            title: '基本工资',
            dataIndex: 'baseWage',
            key: 'baseWage'
        }, {
            title: '月销数量',
            dataIndex: 'num',
            key: 'num'
        }, {
            title: '提成',
            dataIndex: 'houns',
            key: 'houns'
        }]
        onMounted(() => {
            getSalerList()
        })
        const salesMansList = reactive([])

        function getSalerList() {
            salesWage().then(res => {
                // 排序
                res.data.result.sort((a, b) => {
                    return b.num - a.num
                })
                res.data.result.map(el => {
                    el.houns = '￥' + el.houns + '.00'
                    salesMansList.push(el)
                })
            })
        }


        return {
            salesMansList,
            columns
        }  
    },
})
</script>

<style lang="scss" scoped>
.wageUp {
    color: #F4516C;
}
.wageDown {
    color: #6FB8BB;
}
.tableDeep :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>

